{% extends 'base/base.html' %}
{% load app_extras static %}
{% block extra-css %}
<link rel="stylesheet" href="{%static 'idcops/css/select2.min.css'%}">
{% endblock extra-css %}
{% block title %}详情 {{meta.title}}{% endblock %}
{% block content-header %}<h1>{{meta.verbose_name}} <small> {{object}} 详情</small></h1>{% endblock %}

{% block main-content %}

<div class="nav-tabs-custom">
    <ul class="nav nav-tabs">
    {%for zone in zones%}
      {%if zone == current_zone %}
      <li class="active"><a href="?zone_id={{zone.id}}" data-toggle="">{{zone}} <small>({{zone.description}})</small></a></li>
      {%else%}
      <li><a href="?zone_id={{zone.id}}" data-toggle="">{{zone}}</a></li>
      {%endif%}
    {%endfor%}
    {%if perms.core.add_zonegraph %}
    <li class="hidden-sm pull-right">
      <a href="{%url 'idcops:zonemap'%}?zone_id={{current_zone.id}}&action=config" class="text-muted">
        <i class="fa fa-gear"></i>
      </a>
    </li>
    <li class="hidden-sm pull-right">
      <a href="{%url 'idcops:zonemap'%}?zone_id={{current_zone.id}}&action=layout" class="text-muted">
        <i class="fa fa-edit"></i>
      </a>
    </li>
    <li class="hidden-sm pull-right">
      <a href="{%url 'idcops:zonemap'%}?zone_id={{current_zone.id}}&action=newracks" class="text-muted">
        <i class="fa fa-plus"></i>
      </a>
    </li>
    {%endif%}
    </ul>
    <div class="tab-content no-padding">
      <div class="tab-pane active" id="zone_{{current_zone.id}}">

        <div class="box-body">
          <div class="row">
            <div class="col-md-9 col-xs-12">
              <div class="btn-group" id="status-state">
                <button type="button" name="style" value="reset" class="btn btn-default btn-sm">
            			<b>总数</b><small> <b> {{racks.count}}</b>个</small>
            		</button>
                {%for s in statistics%}
                <button type="button" name="status" value="{{s.id}}" data-rsid={{s.id}} class="btn bg-{{s.color}} btn-sm">
                  <b>{{s.text}}</b><small> <b> {{s.count|default:'0'}}</b>个</small>
                </button>
                {%endfor%}

              </div>
            </div>

            <div class="col-md-3 col-xs-12">
                <select id="client-state" class="form-control">
                  <option value="">当前正显示本区域所有客户的机柜</option>
                  {%for obj in clients%}
                  <option name="client" value="{{obj.id}}">{{obj.desc}}</option>
                  {%endfor%}
                </select>
            </div>
          </div>
        </div>
        <div class="box-body table-responsive">
        <table class="table table-condensed table-bordered text-nowarp" width="110%" id="zonemap_detail">
            <tbody>
            {%for cell in cells%}
            {%if forloop.counter0 == cell.row%}<tr>{%endif%}
                {%if cell.rack_id%}
                <td id="cell-{{cell.id}}" width="{% widthratio 100 max_col|add:2 1 %}%"
                class="badge bg-{{cell.rack.status.color}}" data-rackid="{{cell.rack_id}}" data-rt="{{cell.rack.style}}"
                  {%if cell.rack.client_id%} title="{{cell.rack.client.name}} ({{cell.rack.client.desc}})"
                  data-rcid="{{cell.rack.client_id}}"{%endif%}
                  data-rsid="{{cell.rack.status_id}}">
                  <a href="{%url 'core:detail' 'rack' cell.rack_id%}" data-toggle="modal" data-target="#modal">{{cell.rack.name}}</a>
                </td>
                {%else%}
                <td id="cell-{{cell.id}}" width="{% widthratio 100 max_col|add:2 1 %}%"
                class="badge text-black" style="background-color:#fff;">{%if cell.desc%}{{cell.desc}}{%else%}----{%endif%}</td>
                {%endif%}
            {%if cell.col == max_col%}</tr>{%endif%}
            {%endfor%}
            </tbody>
        </table>
        </div>
      </div>
    </div>
</div>

{% endblock main-content %}

{% block extra-js %}

<script src="{%static 'idcops/js/select2.min.js'%}"></script>
<script>
$(document).ready(function (){
// clear modal cache
$('body').on('hidden.bs.modal', '.modal', function () {
    $(this).removeData('bs.modal');
});

$("select").select2();

$("#status-state button").click(function(){
    var status = $(this).attr('value');
    if (status == 'reset') {
      $("#zonemap_detail tbody tr td").css('opacity','1');
    }else if (status == 'disperse'){
      $("#zonemap_detail tbody tr td").css('opacity','1');
      $("#zonemap_detail tbody tr td[data-rt='True']").css('opacity','0.2');
      $("html, body").animate({scrollTop: $("#zonemap_detail tr td[data-rt='False']:first").offset().top}, 300);
    }else if (status == 'perse'){
      $("#zonemap_detail tbody tr td").css('opacity','1');
      $("#zonemap_detail tbody tr td[data-rt='False']").css('opacity','0.2');
      $("html, body").animate({scrollTop: $("#zonemap_detail tr td[data-rt='True']:first").offset().top}, 300);
    }else{
      $("#zonemap_detail tbody tr td").css('opacity','1');
      $("#zonemap_detail tbody tr td[data-rsid!="+status+"]").css('opacity','0.2');
      $("html, body").animate({scrollTop: $("#zonemap_detail tr td[data-rsid="+status+"]:first").offset().top}, 300);
    }
  });

  $("#client-state").change(function(){
    var client = $(this).children('option:selected').attr('value');
    $("#zonemap_detail tbody tr td").css('opacity','1');
    $("#zonemap_detail tbody tr td[data-rcid!="+client+"]").css('opacity','0.2');
    $("html, body").animate({scrollTop: $("#zonemap_detail tr td[data-rcid="+client+"]:first").offset().top}, 300);
  });
  /*
  var td_count = ($("#zonemap_detail tbody tr td").length) / ($("#zonemap_detail tbody tr").length)
  */
  var tda = $("#zonemap_detail tbody tr td a");
  var w1 = tda.width();
  var w2 = tda.parent().width();
  if (w1 > w2) {
    $("body").removeAttr('class').addClass('skin-blue sidebar-mini sidebar-collapse');
    $("#zonemap_detail tbody tr td").removeAttr('width');
    $("#zonemap_detail tbody tr td").width(w1);
  }
});
</script>
{% endblock extra-js %}
